<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">汽车品牌:</p>
			</el-col>
			<el-col :span="3">
				<el-select v-model="templateBrand" size="small" clearable placeholder="请选择品牌">
					<el-option v-for="item in brandCombo" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:10px;">
				<p class="queryLabel">方案名称:</p>
			</el-col>
			<el-col :span="3">
				<el-input size="small" v-model="templateName" placeholder="输入方案名称" style="width:120!important"></el-input>
			</el-col>
			<el-col :span="2" style="margin-left: -20px;">
				<el-button type="primary" size="small" v-on:click='queryTemplate'>查询</el-button>
			</el-col>
			<el-col :span = "5" v-if="upButtonShow">
				<el-upload :action="action" :data="upData" name="upExecl" :on-progress="process" :on-error="error" :on-success="success" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="数据导入中，请稍后！">
						<el-button size="small" type="primary">点击上传</el-button>
						<span slot="tip">只能上传xls/xlsx文件</span>
				</el-upload>
			</el-col>
			<el-col :span="9" style="text-align: right;">
				<el-button type="primary" size="small" v-on:click="add">新增</el-button>
				<el-button type="primary" size="small" v-on:click="edit">编辑</el-button>
				<el-button type="primary" size="small" v-on:click="start">启用</el-button>
				<el-button type="primary" size="small" v-on:click="stop">停用</el-button>
				<el-button type="primary" size="small" v-on:click="initCol">初始化</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24" style="padding-right: 5px;">
				<el-table :data="impTemplateGrid.dataList" stripe border highlight-current-row @row-dblclick="dbClick" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" fixed>
					</el-table-column>

					<el-table-column prop="brand" label="品牌" width="160" :formatter="brandCov">
					</el-table-column>
					<el-table-column prop="schemeTitle" label="方案名称" width="300">
					</el-table-column>
					<el-table-column prop="dataEntityTitle" label="实体名称" width="300">
					</el-table-column>
					<el-table-column prop="titleRow" label="标题行" width="100" align="right">
					</el-table-column>
					<el-table-column prop="dataStartRow" label="数据行" width="100" align="right">
					</el-table-column>
					<el-table-column prop="keyColumn" label="关键数据列" width="120" align="right">
					</el-table-column>
					<el-table-column label="状态" props="status" width="120" :formatter="statusCov">
					</el-table-column>
					<el-table-column prop="createTime" label="创建日期" :formatter="timeFormate" width="180" align="center">
					</el-table-column>
				</el-table>
				<el-pagination small @current-change="pageChange" :current-page="curPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="impTemplateGrid.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="属性列表" v-model="attributeListShow">
			<el-table :data="propsGrid" stripe border style="width: 100%;" highlight-current-row> </el-table-column>-->
				<el-table-column prop="propertyTitle" label="属性标题">
				</el-table-column>
				<el-table-column label="列号">
					<template scope="scope">
						<el-input-number style="width: 120px!important" size="small" v-model="scope.row.columnNum" :min="0" :max="999"></el-input-number>
					</template>
				</el-table-column>
				<el-table-column label="非空" width="70">
					<template scope="scope">
						<el-checkbox v-model="scope.row.fieldEmpty" style="width:40px"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="格式">
					<template scope="scope">
						<el-select size="small" v-model="scope.row.fieldType">
							<el-option label="字符" value="char">
							</el-option>
							<el-option label="日期" value="date">
							</el-option>
							<el-option label="数字" value="number">
							</el-option>
						</el-select>
					</template>
				</el-table-column>
				<el-table-column label="最大长度">
					<template scope="scope">
						<el-input-number v-model="scope.row.fieldLen" style="width: 120px!important" size="small" :min="1" :max="999"></el-input-number>
					</template>
				</el-table-column>
				<el-table-column label="合并" width="70">
					<template scope="scope">
						<el-checkbox v-model="scope.row.isMerge" style="width:40px"></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="70" fixed="right">
					<template scope="scope">
						<el-tooltip class="item" effect="light" content="保存" placement="top">
							<el-button type="primary" size="mini" style="font-size: 14px;" class="iconfont icon-save" @click.native.prevent="saveProps(scope.$index)"></el-button>
						</el-tooltip>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination small @current-change="propsChange" :current-page="curPropsPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="propsTotal">
			</el-pagination>
		</el-dialog>
		<!-- 新增实体-->
		<el-dialog title="新增方案" v-model="templateFormShow">
			<el-form :model="templateFormData" ref="entityForm" :rules="entityRule" label-width="140px">
				<el-form-item label="方案名称" prop="schemeTitle" required>
					<el-input size="small" v-model="templateFormData.schemeTitle"></el-input>
				</el-form-item>
				<!--品牌管理 开始-->
				<el-form-item label="品牌管理" prop="brand" required>
					<el-select v-model="templateFormData.brand" placeholder="请选择">
						<el-option v-for="item in brandCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<!--品牌管理 结束-->
				<el-form-item label="数据实体" prop="dataEntityId" required>
					<el-select v-model="templateFormData.dataEntityId" placeholder="请选择">
						<el-option v-for="item in entityCombo" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="标题行" prop="titleRow" required>
					<el-input-number v-model="templateFormData.titleRow" :min="1" :max="999"></el-input-number>
				</el-form-item>
				<el-form-item label="数据行" prop="dataStartRow" required>
					<el-input-number v-model="templateFormData.dataStartRow" :min="1" :max="999"></el-input-number>
				</el-form-item>
				<el-form-item label="关键数据列" prop="keyColumn" required>
					<el-input-number v-model="templateFormData.keyColumn" :min="1" :max="999"></el-input-number>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="templateFormShow=false">取 消</el-button>
				<el-button type="primary" @click="saveEntity">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 新增实体-->
		<!--<el-dialog title="修改属性标题" v-model="propsShow">
																						                                                                                                    <el-form :model="propsFormData" ref="propsForm" :rules="propsRule" label-width="140px">
																						                                                                                                        <el-form-item label="属性名称" prop="propertyName" required>
																						                                                                                                            <el-input size="small" v-model="propsFormData.propertyName" readonly></el-input>
																						                                                                                                        </el-form-item>
																						                                                                                                        <el-form-item label="属性标题名" prop="propertyTitle" required>
																						                                                                                                            <el-input size="small" v-model="propsFormData.propertyTitle"></el-input>
																						                                                                                                        </el-form-item>
																						                                                                                                    </el-form>
																						                                                                                                    <div slot="footer" class="dialog-footer">
																						                                                                                                        <el-button @click="propsShow=f alse">取 消</el-button>
																						                                                                                                        <el-button type="primary" @click="saveProps">确 定</el-button>
																						                                                                                                    </div>
																						                                                                                                </el-dialog>-->
	</div>
</template>
<!--数据脚本 -->
<script>
	import moment from 'moment'

	export default {
		data: function() {
			return {
				//等待框
				fullscreenLoading: false,
				upButtonShow: false,
				//shangchuan 
				action: this.API_ROOT + "/base/execl/upload/temp",
				upData: {
					schemeId: '',
					uid: window.localStorage.getItem("uid"),
					token: window.localStorage.getItem("token")
				},
				//分页设置
				page: this.page,
				//分组数据
				impTemplateGrid: {
					total: 0,
					dataList: []
				},
				curPage: 0,
				//查询条件
				templateName: '',
				templateBrand: '',
				templateFormShow: false,
				templateFormData: {
					id: '',
					dataEntityId: '',
					brand: '',
					dataEntityTitle: '',
					qualifiedName: '',
					schemeTitle: '',
					titleRow: 0,
					dataStartRow: 0,
					keyColumn: 0,
					status: '1',
					createTime: 0,
					createUser: "",
					updateTime: 0,
					updateUser: "",

				},
				entityEmptyData: {
					id: '',
					schemeTitle: '',
					dataEntityId: '',
					brand: '',
					dataEntityTitle: '',
					qualifiedName: '',
					titleRow: 0,
					dataStartRow: 0,
					keyColumn: 0,
					status: '1',
					createTime: 0,
					createUser: "",
					updateTime: 0,
					updateUser: "",
				},

				entityRule: {
					entityTitle: [{
						required: true,
						message: '请输入显示名称',
						trigger: 'blur'
					}],
					templateName: [{
						required: true,
						message: '请输入实体名称',
						trigger: 'blur'
					}],
					brand: [{
						required: true,
						message: '请选择品牌',
						trigger: 'change'
					}],
				},
				/*******实体属性********/
				curSchemaId: '',
				propsGrid: [],
				propsTotal: 0,
				curPropsPage: 0,
				propsShow: false,
				propsFormData: {
					id: '',
					entityId: '',
					propertyName: '',
					propertyTitle: '',
					displayIndex: 0,
					createTime: 0,
					createUser: window.localStorage.getItem("uid"),
					updateTime: 0,
					updateUser: window.localStorage.getItem("uid"),
				},
				propsEmptyData: {
					id: '',
					entityId: '',
					propertyName: '',
					propertyTitle: '',
					displayIndex: 0,
					createTime: 0,
					createUser: window.localStorage.getItem("uid"),
					updateTime: 0,
					updateUser: window.localStorage.getItem("uid"),
				},

				propsRule: {
					propertyTitle: [{
						required: true,
						message: '请输入属性标题',
						trigger: 'blur'

					}],

				},
				/*品牌管理 下拉框*/
				brandCombo: [],
				/*数据实体下拉框*/
				entityCombo: [],
				//品牌编码解析
				brandConvert: [],
				//选中的列
				multipleSelection: [],
				//属性列表
				attributeListShow: false,
			}
		},
		methods: {
			/*--------------------------导入需要的方法-------------------------------*/
			process: function() {
				this.$data.fullscreenLoading = true;
//				this.$data.loadingVue = this.$loading({
//					fullscreen: true,
//					text: "正在导入数据，请稍候"
//				});
			},
			error: function(err, response) {
				this.$message.error(response.data.msg);
				this.$data.fullscreenLoading = false;
			},
			success: function(response) {
				this.$data.fullscreenLoading = false;
				debugger;

				if(response.success) {
					this.queryTemplate();
					this.$message(response.msg);
				} else {
					this.$message.error(response.msg);
				}

			},
			//复选框回调函数
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				if (this.$data.multipleSelection.length == 1){
					this.$data.upButtonShow = true;
					this.$data.upData.schemeId = this.$data.multipleSelection[0].id;
				}else {
					this.$data.upButtonShow = false;
				}
			},
			queryTemplate: function() {

				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/page',
					params: {
						templateName: this.$data.templateName,
						brand: this.$data.templateBrand,
						start: this.$data.curPage,
						limit: this.$data.page.pageSize
					}

				}).then(function(resp) {
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.impTemplateGrid = resp.data;
				}, function(error) {
					// error
				})

			},
			dbClick: function(row) {
				this.$data.attributeListShow = true;
				this.$data.curSchemaId = row.id;
				this.queryProps();
			},
			pageChange: function(page) {
				this.$data.curPage = page;
				this.queryTemplate();
			},
			add: function() {
				this.$data.templateFormData = Object.assign(this.$data.templateFormData, this.$data.entityEmptyData)
				this.$data.templateFormShow = true;

			},
			//
			edit: function() {

				if(this.$data.multipleSelection.length == 1) {
					this.$data.templateFormData = Object.assign(this.$data.templateFormData, this.$data.entityEmptyData)
					var data = this.$data.multipleSelection[0];
					this.$data.templateFormData = Object.assign(this.$data.templateFormData, data);
					this.$data.templateFormShow = true;
				} else {
					this.$message.error("请选择一条数据")
				}

				//				this.$data.templateFormData = Object.assign(this.$data.templateFormData, this.$data.entityEmptyData)
				//				var data = this.$data.impTemplateGrid.dataList[index];
				//				this.$data.templateFormData = Object.assign(this.$data.templateFormData, data);
				//				this.$data.templateFormShow = true;

			},
			start: function(index) {

				if(this.$data.multipleSelection.length == 1) {
					var data = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/base/execl/start',
						params: {
							id: data.id,
						}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.queryTemplate();
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			stop: function(index) {

				if(this.$data.multipleSelection.length == 1) {
					var data = this.$data.multipleSelection[0];
					this.$http({
						method: 'POST',
						url: this.API_ROOT + '/base/execl/stop',
						params: {
							id: data.id,
						}
					}).then(function(resp) {
						this.$message(resp.data.msg);
						this.queryTemplate();
					}, function(error) {
						// error
					})
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			initCol: function(index) {

				if(this.$data.multipleSelection.length == 1) {
					this.$confirm('此操作将删除原有数据，重新初始化, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//调用初始化接口
						var data = this.$data.multipleSelection[0];
						this.$data.curSchemaId = data.id;

						this.$http({
							method: 'POST',
							url: this.API_ROOT + '/base/execl/init',
							params: {
								schemeId: data.id,
								dataEntityId: data.dataEntityId,
								brand: data.brand,
							}
						}).then(function(resp) {
							if(resp.data.success) {
								this.$message(resp.data.msg);
								//查询属性列表
								this.queryProps();
							} else {
								this.$message.error(resp.data.msg);
							}

						}, function(error) {
							// error
						})

					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消初始化'
						});
					});
				} else {
					this.$message.error("请选择一条数据")
				}

			},
			saveEntity: function() {
				this.$refs.entityForm.validate(function(valid, $event) {
					// 验证通过
					if(valid) {
						this.$http.post(this.API_ROOT + '/base/execl/save', this.$data.templateFormData)
							.then(resp => {
								if(resp.data.success) {
									this.$message(resp.data.msg);
									this.queryTemplate();
									this.$data.templateFormShow = false;

								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});
					} else {
						return false
					}
				}.bind(this));

			},
			//查询实体属性
			queryProps: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/execl/props',
					params: {
						schemeId: this.$data.curSchemaId,
						start: this.$data.curPropsPage,
						limit: this.$data.page.pageSize
					}

				}).then(function(resp) {
					// es5写法
					this.$data.propsTotal = Number(resp.data.total);
					this.$data.propsGrid = resp.data.dataList;
					for(var i = 0;i<this.$data.propsGrid.length;i++){
						if (this.$data.propsGrid[i].fieldEmpty == "true"){
							this.$data.propsGrid[i].fieldEmpty = true;
						}else if(this.$data.propsGrid[i].fieldEmpty == null){
							this.$data.propsGrid[i].fieldEmpty = false;
						}
					}
				}, function(error) {
					// error
				})
			},

			propsChange: function(page) {
				this.$data.curPropsPage = page;
				this.queryProps();
			},
			//保存
			saveProps: function(index) {
				debugger;
				if(this.$data.propsGrid[index].fieldEmpty == true && this.$data.propsGrid[index].fieldType == null) {
					this.$message.error("请选择格式！");
				} else {
					var data = this.$data.propsGrid[index];
					this.$http.post(this.API_ROOT + '/base/execl/saveProps', data)
						.then(resp => {
							debugger;
							if(resp.data.success) {
								this.$message(resp.data.msg);
								// this.queryProps();
								this.$data.propsShow = false;

							} else {
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
			},
			statusCov: function(row, column) {
				return row.status == '1' || row.status == 1 ? "已启用" : "已停用";
			},
			timeFormate: function(row, column) {
				if(row.createTime == "" || row.createTime == null) return "";
				return moment(Number(row.createTime)).format("YYYY-MM-DD");
			},
			/*** 品牌 下拉框 ***/
			queryBrandCombo: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/brand/combo'
				}).then(function(resp) {
					this.$data.brandCombo = resp.data;
				}, function(error) {
					// error
				})
			},
			/*** 品牌 下拉框 ***/
			queryBrandConvert: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/brand/convert'
				}).then(function(resp) {
					this.$data.brandConvert = resp.data;
				}, function(error) {
					// error
				})
			},

			/*** 查询实体下拉框 ***/
			queryEntityCombo: function() {
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/base/dataentity/combo'

				}).then(function(resp) {

					this.$data.entityCombo = resp.data;
				}, function(error) {
					// error
				})

			},
			brandCov: function(row, col) {
				if(row.brand) {
					return this.$data.brandConvert[row.brand];
				}
			}
		},
		created: function() {
			//查询
			this.queryTemplate();
			this.queryEntityCombo();
			this.queryBrandCombo();
			this.queryBrandConvert();
		}
	}
</script>
<style>

</style>